<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节目修改</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/show/css/font.css">
    <link rel="stylesheet" href="/show/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/show/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/show/js/xadmin.js"></script>
</head>
<body>
<div class="x-body">
    <form class="layui-form">

        <input type="hidden" name="activityId" id="activityId" th:value="${act.activityId}">
        <div class="layui-form-item">
            <label for="activityName" class="layui-form-label">
                <span class="x-red">*</span>节目名
            </label>
            <div class="layui-input-inline">
                <input type="text"  id="activityName" name="activityName"  required="" lay-verify="required"
                       autocomplete="off" class="layui-input" placeholder="表演节目名" th:value="${act.activityName}">
            </div>
            <p id="message"></p>
        </div>

        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label"><span class="x-red">*</span>所属区域</label>
            <div class="layui-input-line" >
                <!-- 所属区域下拉隐藏值-->
                <select style="width: 300px" name="activityAddr" lay-verify="required" id="activityAddr" class="firstSelect"
                        lay-filter="addr" layui-select="">
                    <option th:value="${act.activityAddr}" th:text="${act.activityAddr}" selected=""></option>
                    <option th:each="addr:${addrList}" th:value="${addr.addrName}" th:text="${addr.addrName}"></option>
                </select>
            </div>
        </div>


        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label"><span class="x-red">*</span>表演地点</label>
            <div class="layui-input-line" >
                <!-- 部门下拉隐藏值-->
                <select style="width: 300px" name="activityArea" lay-verify="required" id="activityArea" >
                    <option th:value="${act.activityArea}" th:text="${act.activityArea}" selected></option>
                    <option th:each="area:${areaList}" th:value="${area}" th:text="${area}"></option>
                </select>
            </div>
        </div>

        <input type="hidden" name="activityDel" id="activityDel" th:value="${act.activityDel}" >
        <input type="hidden" name="activityStatus" id="activityStatus" th:value="${act.activityStatus}" >

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>表演场次
            </label>
            <div class="layui-input-block" id="actTime">
                <input type="radio" name="dayTime" th:if="${act.dayTime==1}" value="1" title="白天场" checked>
                <input type="radio" name="dayTime" th:if="${act.dayTime==1}" value="2" title="夜间场" >

                <input type="radio" name="dayTime" th:if="${act.dayTime==2}" value="1" title="白天场" >
                <input type="radio" name="dayTime" th:if="${act.dayTime==2}" value="2" title="夜间场" checked>
            </div>
        </div>


        <div class="layui-form-item">
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>


    </form>
</div>
</body>
</html>

<script>
    //form表单,layer弹出框
    layui.use(['form','layer'],function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;

        form.on('select(addr)', function(data){
            var activityAddr = data.value;
            $.ajax({   //2、发送给后端
                url: "/activity/area",
                type: 'POST',  //设置发送的方式 这里假设为POST
                dataType: 'json',  //返回的数据类型
                data: {"activityAddr": activityAddr},  //把选中的标题发给后端
                success:function(data) {                // 4、这里写成功后更新页面的操作
                    $("#activityArea").html("");
                    $.each(data, function(i, val) {
                        var option1 = $("<option>").val(val).text(val);
                        $("#activityArea").append(option1);
                        form.render('select');
                    });
                    $("#activityArea").get(0).selectedIndex=0;
                }
            })
        });

        //新增按钮
        form.on('submit(add)', function (data) {
            var activityStatus = $("#activityStatus").val();
            var activityName = $("#activityName").val();
            var activityAddr = $("#activityAddr").val();
            var activityArea = $("#activityArea").val();
            var dayTime = $("input[type=radio]:checked").val();
            var activityId = $("#activityId").val();
            var activityDel = $("#activityDel").val();
            console.log(dayTime);

            console.log(data);
            $.ajax({
                url: "/activity/updateActivity",
                async: false,
                type: "POST",
                dataType: "json",
                data: {
                    "activityStatus":activityStatus,
                    "activityName":activityName,
                    "activityAddr":activityAddr,
                    "activityArea":activityArea,
                    "dayTime":dayTime,
                    "activityId":activityId,
                    "activityDel":activityDel
                },
                success: function (data) {
                    //提示信息
                    layer.alert(data.info);
                    //放入了map中，调用info
                    if (data.info == "修改成功") {
                        //获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        //刷新
                        parent.window.location.replace("/activity/activityList")
                    }else{
                        layer.msg(data.info,{icon: 5,time:1000});
                    }
                }

            })

        })
    })

</script>